<template>
  <div v-loading="loading1" style="background:#A9AAAC;width: 100%;max-height:100%;overflow: auto;padding:30px;margin;0px;font-size:12px;margin-bottom:10px;" >
      <el-row >
          <el-col :span="24" style="border:0px;">
              <div class="grid-content"  >
                  <div style="text-align:center;margin:auto;font-size:30px;">右轴系(含主机遥控、齿轮箱、艉管、轴承）</div>
              </div>
          </el-col>
      </el-row>
      <el-row style="margin-bottom:20px">
          <el-col :span="24" style="text-align:center;align-items:center;align-content:center;justify-content: center;  height:250px;margin-top:20px;">
           
            <div style="position: relative;">
               <img :src="img" style="width:80%;height: 100%;margin-bottom:20px;"/>
               <div style="height:150px;width:330px;border:1px solid black;position:absolute;margin-top:-270px;margin-left:180px">
                <e-charts  :option="option"></e-charts>
              </div>
            </div>
             
            
          </el-col>
        </el-row>
      <el-row >
          <el-col :span="5" style="border:1px solid black;">
              <h1 style="text-align:center; padding:10px ; align-content:center">右齿轮箱、艉管、轴承模拟量报警和显示</h1>
              
              <div  v-for="(item,index) in data.one" :key="index" style="padding:5px;display:flex;text-align:end;align-items:end;margin-top:1px;margin-left:5px">
                  <div  :style="{width:'50%',color:getColorName(item) }" >{{item.deviceName}}</div>
                  <div style="margin-left:1px;width:60%;padding:1px;display:flex;text-align:center;align-items:center;">
                      <div style="width:60%;height:20px;border: 1px solid black;align-content:center">{{item.remark}}</div>
                      <div style="margin-left:5px" > {{item.unit}}</div>
                  </div>
              </div>
          </el-col>
          <el-col :span="1" style="border:1px solid #A9AAAC;">
          </el-col>
          <el-col :span="12" style="border:1px solid black;">
              <h1 style="text-align:center; padding:10px ; align-content:center;">右主机遥控开关量报警和显示</h1>
              
              <div style="display:grid; grid-template-columns: repeat(2, 1fr);">
               
                  <div  v-for="(item,index) in data.two" :key="index" style="padding:5px;display:flex;text-align:center;align-items:center;margin-top:1px;margin-left:20px">
                          <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                          <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                  </div>
                 
              </div>
          </el-col>
          <el-col :span="1" style="border:1px solid #A9AAAC;">
          </el-col>
          <el-col :span="5" style="border:1px solid black;">
              <h1 style="text-align:center; padding:10px ; align-content:center;">右齿轮箱、艉管、轴承开关量报警</h1>
              <div  v-for="(item,index) in data.three" :key="index" style="padding:5px;display:flex;text-align:center;align-items:center;margin-top:1px;margin-left:20px">
                      <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                      <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
              </div>
                  
          </el-col>
      </el-row>
      
  </div>
</template>
<script>
import {listDevs} from  "@/api/system/device";
import { mapState } from "vuex";
import { histogramData } from "@/api/system/chartConfig";
import datas from '@/utils/test.json';
import rightAxis from '@/assets/images/rightAxis.png'
export default {
name: "emergencyBoard",
created() {
  
  if(!this.timer){
  this.timer = setInterval(() => {
      this.init()
      this.getData();
  }, 3000);//3秒刷新次
}else{
  this.init()
}
},
beforeDestroy() {

  if(this.timer){
      clearInterval(this.timer);
      this.timer=null;
    }
},
computed: {
  option(){
        return{
           grid:this.showGrid(),
            backgroundColor:"#A9AAAC",
            title:{
                text:"右轴系温度柱状图",
                left:"center",
                textStyle: {
                fontSize: 10
                }
            },
            legend: {bottom:"-5px"},
            tooltip: {
                trigger: 'none',
                axisPointer: {
                type: 'cross'
                }
            },
            color:['#006FFF'],
            xAxis: [{
                name:"1s更新", //
                nameTextStyle:{
                 
                  color:"black",
                  fontSize:9  
                },
                type: 'category',
                width:0.08,
                axisLabel: {
                  margin:5,
                  fontSize:10,
                  color: 'black',// x轴字体颜色
                  formatter: val => {
                    let result= ''
                  const textLength = val.length
                    const limitNumber = 4 // 一行显示几个字
                    if (textLength > limitNumber) {
                      for (var i = 0; i < textLength; i += limitNumber) {
                        result += val.substring(i, i + limitNumber) + '\n'
                      }
                      result = result.trim() // 移除最后一个换行符
                    } else {
                      result = val
                    }
                    return result
                  }
                },
                axisTick: {      // 坐标轴的刻度
                  show: true,    // 是否显示
                  inside: true,  // 是否朝内
                  length: 1,      // 长度
                  lineStyle: {
                    // color: 'red',  // 默认取轴线的颜色
                    width: 1,
                    type: 'solid'
                  }
                },
                axisLine: {
                  symbol: ['none', 'arrow'],  // 是否显示轴线箭头
                  symbolSize: [8, 8], // 箭头大小
                  symbolOffset: [0, 7],  // 箭头位置
                  inside: true,  // 是否朝内
                    onZero: false,
                    lineStyle: {
                    color: 'blue',
                    width: 1,
                    type: 'solid'
                  }
                },
                data:this.bar.xDatas// x轴
            }],
            yAxis: {
              // interval:20,
                name:this.bar.unit,
                type: 'value',//y轴
                axisLine: {    // 坐标轴 轴线
                    show: true,  // 是否显示
                    //  -----   箭头 -----
                    symbol: ['none', 'arrow'],  // 是否显示轴线箭头
                    symbolSize: [8, 8],  // 箭头大小
                    symbolOffset: [0, 7], // 箭头位置

                    // ----- 线 -------
                    lineStyle: {
                      color: 'blue',
                      width: 1,
                      type: 'solid'
                    }
                },
                axisLabel: {      // 坐标轴的标签
                  fontSize:9,
                  show: true,    // 是否显示
                  inside: false,  // 是否朝内
                  rotate: 0,     // 旋转角度
                  margin: 5,     // 刻度标签与轴线之间的距离
                  color: 'red',  // 默认轴线的颜色
                },
                axisTick: {      // 坐标轴的刻度
                  show: true,    // 是否显示
                  inside: true,  // 是否朝内
                  length: 6,      // 长度
                  lineStyle: {
                    // color: 'red',  // 默认取轴线的颜色
                    width: 1,
                    type: 'solid'
                  }
                },
                splitLine: {    // gird 区域中的分割线
                show: false,   // 是否显示
                lineStyle: {
                  color: '#666',
                  width: 1,
                  type: 'dashed'
                }
              },
              splitArea: {     // 网格区域
                show: false   // 是否显示，默认为false
              }

            },
            series:this.bar.serials
        }
    },
...mapState("app", {   // 对象形式
    alarmList: "alarmList",
    lightSwitch:"lightSwitch",
    extExpSwitch:"extExpSwitch"
})
},
methods:{
  async   getData(){
    // console.log(111)
    await  histogramData({deviceGraphicalId:this.currentId}).then( async (response) =>
      {
      this.bar.data =  await response.data;
      // this.bar.data=datas
      // console.log(this.bar.data.data.data)
      let dataList  = this.bar.data.data
      this.bar.xDatas=   dataList.map(item=> {return item.deviceName});
      // console.log(this.bar.xDatas)
      this.bar.serials=   [{
              type:'bar',
              barWidth:'20',
              data: dataList.map(item=> {return item.value})
          }]
      console.log("12345",this.bar.serials)

    })
    },

  getFlash(row){
      //2、报警消息时，闪烁
      let f = this.alarmList.some(alarm=>
          alarm ==row.deviceId
      );
      if(f){
        if(row.displayAlarm=="2"){//告警
          return true;
        }
      }
      if(this.lightSwitch=='1'  ||this.extExpSwitch=="1")
      {//1、试灯打开
        // console.log("extExpSwitch=="+this.extExpSwitch)
        if(row.displayAlarm=="2"){//告警
          return true;
        }
      }
        return false;
    },
    getColorName(row){
      //告警消息
      if("2"== row.displayAlarm){
          let f = this.alarmList.some(alarm=>
          alarm ==row.deviceId
          );
          if(f){
              return 'red';
          }
          //3、显示设备状态颜色
          if(row.warnStatus=='1'||row.warnStatus=='0'){
              return 'black';
          }
          return 'red'
      }
      return "black";
      
    },
    getColor(row){
      if("2"== row.displayAlarm){  //告警类型
        //告警消息
        let f = this.alarmList.some(alarm=>
          alarm ==row.deviceId
        );
        if(f){//2、有报警通知，则显示灯的颜色
          return row.lightColor;
        }
      }
      if(this.lightSwitch=='1' ||this.extExpSwitch=="1"){//1、试灯打开，显示灯的颜色
          console.log("extExpSwitch=="+this.extExpSwitch)
          return row.lightColor;
      }
      //3、显示设备状态颜色
      if(row.warnStatus=='1'||row.warnStatus=='0'){
        return 'grey';
      }
        return row.lightColor;
    },
    showGrid() {
          let object = {
            left: "1%", //图表距边框的距离
            right: "16%",
            top: "30%",
            bottom: "5px",
            containLabel: true,
          };
          return object;
        },
  init(){
      listDevs({"deptIds":"15,8"}).then(response=>{
        this.loading1=false
          console.log(response)
          let dataArr = response.data;
          if(dataArr){
              console.log(dataArr)
              this.data.one= dataArr.filter(item=>{
                  return   item.deptId=="15" && "BA" == item.modality && ("15M-005"!=item.systemId && "15M-006"!=item.systemId)//1号采集箱  模拟量
                  }).sort((a,b)=> {
                  return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
                  this.data.one =this.data.one.slice(0,7)
              console.log("one==", this.data.one)
              this.data.two= dataArr.filter(item=>{
              return  item.deptId=="8" && "MR" == item.modality //开关量 的NO.1主机遥控
              }).sort((a,b)=> {
              return a.systemId.split("-")[1]-b.systemId.split("-")[1]})  
              console.log("two==", this.data.two)
              this.data.three= dataArr.filter(item=>{
                  return   item.deptId=="15" && "MR" == item.modality && item.systemId.split("-")[1]>'034' && ("15K-042"!=item.systemId) //1号采集箱  开关量
                  }).sort((a,b)=> {
                  return a.systemId.split("-")[1]-b.systemId.split("-")[1]}) 
                  this.data.three=    this.data.three.slice(0,10)  
              console.log("three==", this.data.three)
             
          }
          
      })
  },

 
},
data(){
    return{
      loading1:true,
      currentId:"11",
      img:rightAxis,
        bar:{
            timer:null,
            time:this.$route.query.time,
            // data: datas,
            serials:[],
            xDatas:[],
            unit:this.$route.query.unit==1?'Kpa':'°C'
          },
        loading :false,
        total: 0,
        data:{
          one:[],
          two:[],
          three:[],
          four:[]
        },

          timer:null,
          deptId:this.$route.query.depCode,
    }
  }
}
</script>
<style scoped>


.tip {
margin: 2px;
 padding: 1px;
 color: rgb(52 88 124 / 75%);

 border-radius: 20% 0% 40% 0%;
 background-color: rgb(122 132 216 / 19%);
 position: absolute;float:left;margin: 2px;
}

.el-row {
 margin-bottom: 20px;

}
.el-col {
 border-radius: 4px;
}
.bg-purple-dark {
 background: #99a9bf;
}
.bg-purple {
 background: #d3dce6;
}
.bg-purple-light {
 background: #e5e9f2;
}


.parent {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.child{
flex-basis: 20%;
}
.alarmDiv{
    display:block;
    -webkit-animation-name: imageAnim;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease;
    -webkit-animation-play-state: running;
}
@-webkit-keyframes imageAnim{
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 0;}
}
.grid-content {
  text-wrap:wrap;
  font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
  }


</style>
